<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/css/login.css}">
</head>
<body>
<div class="head">
    <div class="ico">
        <span>网上作业批改</span>
    </div>
    <div class="banner">
        <img th:src="@{/images/login-bg-img.jpg}" alt="">
        <div class="superstratum">
            <div class="text">
                <div class="box">
                    <div class="txt">
                        春蚕到死丝方尽，
                    </div>
                    <div class="txts">
                        蜡炬成灰泪始干。
                    </div>
                </div>
            </div>
            <div class="interface">
                <div class="title">
                    <span>注册界面</span>
                </div>
                <div class="enter">
                    <form action="" align="center">
                        <div class="input">
                            <span>用户名：</span>
                            <input id="username" type="text" name="username"><br><br>
                            <span>密码：</span>
                            <input id="password" type="password" name="password">
                            <span>确认密码：</span>
                            <input id="re-password" type="password" name="password">
                            <br><br><br><br>
                        </div>
                        <button id="login-btn" type="button">注册</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div th:replace="common/commonElement :: jsFile"></div>
<script>
    layui.use('layer', function () {
        var layer = layui.layer;
    });

    document.getElementById("login-btn").onclick = function () {
        var username = document.getElementById("username").value;
        var password = document.getElementById("password").value;
        var rePassword = document.getElementById("re-password").value;

        // 正则：用户名和密码只能包含大小写字母、数字，位数为6-18位
        var reg = /[A-Za-z0-9]{6,18}$/;

        // 判断用户名密码格式是否正确
        var flag = reg.test(username) && reg.test(password);

        if (!flag) {
            layer.open({
                title: "格式错误"
                , content: "用户名与密码仅支持字母、数字且长度为6-18位，请重新输入！"
            });
        } else if (password == rePassword) {
            // 1.创建对象
            var xhr = new XMLHttpRequest();
            // 2.设置请求信息
            var url = projectPath + "/admin/regist";
            url = url + "?username=" + username;
            url = url + "&password=" + password;
            xhr.open('POST', url);
            // 使用ajax向后端发送json数据必须设置这个
            xhr.setRequestHeader("Content-type", "application/json;charset=UTF-8");
            // 3.发送请求
            xhr.send();
            // 4.接收响应
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var text = xhr.responseText;
                    var jsonResult = JSON.parse(text);
                    if (jsonResult.result == "SUCCESS") {
                        layer.open({
                            title: "注册成功"
                            , content: "注册成功，3秒后自动跳转到登陆界面！请耐心等待！"
                            , time: 3000
                            , end: function () {
                                window.location.href = projectPath + "/admin/toLogin";
                            }
                        });
                    } else if (jsonResult.result == "FAILED") {
                        layer.open({
                            title: "注册失败"
                            , content: jsonResult.message
                        });
                    } else {
                        layer.open({
                            title: "注册失败"
                            , content: "可能是服务器挂了，请等待技术人员维护……"
                        });
                    }
                }
            };
        } else {
            layer.open({
                title: "格式错误"
                , content: "两次输入的密码不一致，请重新输入！"
            });
        }
    }
</script>
</body>
</html>